<script>
import FilterArea from "@/components/FilterArea.vue";
import ListArea from "@/components/ListArea.vue";
import mixins from "@/assets/js/mixins.js";

export default {
  name: "ResourceIndex",
  components: {FilterArea, ListArea},
  data() {
    return {
      resourceFilter: {
        subject: '',
        categoryId: ''
      }
    }
  },
  mixins: [mixins],
  created() {
    this.pageType = "resource";
    this.search();
  },
  methods: {
    search() {
      let option = {
        pageNo: 1,
        pageSize: 10
      }
      let subject = this.resourceFilter.subject;
      if (subject) {
        option.subject = ['like', subject];
      }

      let categoryId = this.resourceFilter.categoryId;
      if (categoryId) {
        option.categoryId = ['eq', categoryId];
      }

      this.onSearch(option).then(res => {
        console.log(res);
      })
    },
    onReset() {
      this.resourceFilter.subject = "";
      this.resourceFilter.categoryId = "";
    },
    _edit  (id){
      this.$router.push({
        path: '/resource/edit',
        query: {
          id: id
        }
      })
    },
    _delete(id){
      this.onDelete(id).then(res => {
        this.$message.success("删除成功");
        this.search();
      })
    }
  }
}
</script>

<template>
  <transition name="slide">
    <FilterArea @onSearch="search" @onReset="onReset" v-if="showFilterArea">
      <template #inputBox>
        <div class="area flex-rcs">
          <label>资源标题</label>
          <el-input v-model="resourceFilter.subject" placeholder="请输入相关资源的标题"/>
        </div>
        <div class="area flex-rcs">
          <label>资源分类</label>
          <el-select v-model="resourceFilter.categoryId" placeholder="请选择资源分类"></el-select>
        </div>
      </template>
    </FilterArea>
  </transition>
  <ListArea list-url="/resource/edit"
            list-title="资源" @create="onCreate" @handleFilter="handleFilter">
    <template #table-list>
      <el-table :data="list.tableData">
        <el-table-column label="" type="selection" width="80"></el-table-column>
        <el-table-column tooltip-effect  label="资源标题" prop="subject"></el-table-column>
        <el-table-column label="资源封面">
          <template #default="scope">
            <el-image :src="'data:image/png;base64,'+scope.row.coverImage"></el-image>
          </template>
        </el-table-column>

        <el-table-column label="资源分类" prop="categoryName" width="80" align="center"></el-table-column>
        <el-table-column label="资源类型" prop="type" width="80" align="center"></el-table-column>
        <el-table-column label="资源状态" prop="status" width="80" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status==='正常'?'primary':'warning'">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="150">
          <template #default="scope">
            <div>{{ formatDate(scope.row.createTime) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template #default="scope">
            <el-button size="small" type="primary" @click="_edit(scope.row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="_delete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination></el-pagination>
    </template>
  </ListArea>
</template>

<style scoped>

</style>
